<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="renderer" content="webkit" />

	<title>H+ 后台主题UI框架 - 主页</title>

	<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台" />
	<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术" />

	<!--[if lt IE 9]>
	<meta http-equiv="refresh" content="0;ie.html" />
	<![endif]-->

	<link rel="shortcut icon" href="favicon.ico" />
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
	<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
	<link th:href="@{/css/animate.css}" rel="stylesheet}" />
	<link th:href="@{/css/style.css}" rel="stylesheet" />
	<link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden;">
<div id="wrapper">
	<!--左侧导航开始-->
	<nav class="navbar-default navbar-static-side" role="navigation">
		<div class="nav-close"><i class="fa fa-times-circle"></i></div>
		<div class="sidebar-collapse">
			<ul class="nav" id="side-menu">
				<li class="nav-header">
					<div class="dropdown profile-element">
						<span><img alt="image" class="img-circle" src="img/profile_small.jpg" /></span>
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">
									<span class="clear">
										<span class="block m-t-xs"><strong class="font-bold">Beaut-ruoyi</strong></span>
										<span class="text-muted text-xs block">超级管理员<b class="caret"></b></span>
									</span>
						</a>
						<ul class="dropdown-menu animated fadeInRight m-t-xs">
							<li><a class="J_menuItem" href="form_avatar.html">修改头像</a></li>
							<li><a class="J_menuItem" href="profile.html">个人资料</a></li>
							<li><a class="J_menuItem" href="contacts.html">联系我们</a></li>
							<li><a class="J_menuItem" href="mailbox.html">信箱</a></li>
							<li class="divider"></li>
							<li><a href="login.html">安全退出</a></li>
						</ul>
					</div>
					<div class="logo-element">H+</div>
				</li>
				<!-- 菜单 -->
				<li th:each="menu: ${menuList}">
					<a th:href="@{${menu.url}}" th:data-index="${menu.id}" th:data-index-pid="${menu.parentId}">
						<i class="fa fa-home"></i>
						<span class="nav-label" th:text="${menu.menuName}"></span>
						<span class="fa arrow" th:if="${menu.children != null and #lists.size(menu.children) > 0}"/>
					</a>
					<ul class="nav nav-second-level" th:if="${menu.children != null and #lists.size(menu.children) > 0}">
						<li th:each="cmenu : ${menu.children}">
							<!--									<a class="J_menuItem" id="${cmenu.perms}" sa:hasPermission="${cmenu.perms}" th:href="@{${cmenu.url}}" th:data-index="${cmenu.id}" th:text="${cmenu.menuName}">-->
							<a class="J_menuItem" id="${cmenu.perms}" th:href="@{${cmenu.url}}" th:data-index="${cmenu.id}" th:text="${cmenu.menuName}">
							</a>
						</li>
					</ul>
				</li>
			</ul >
		</div>
	</nav>
	<!--左侧导航结束-->
	<!--右侧部分开始-->
	<div id="page-wrapper" class="gray-bg dashbard-1">
		<div class="row border-bottom">
			<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0;">
				<div class="navbar-header">
					<a class="navbar-minimalize minimalize-styl-2 btn btn-primary" href="#"><i class="fa fa-bars"></i> </a>
					<form role="search" class="navbar-form-custom" method="post" action="search_results.html">
						<div class="form-group">
							<input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search" />
						</div>
					</form>
				</div>
				<ul class="nav navbar-top-links navbar-right">
					<li class="dropdown">
						<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i> <span class="label label-warning">16</span> </a>
						<ul class="dropdown-menu dropdown-messages">
							<li class="m-t-xs">
								<div class="dropdown-messages-box">
									<a href="profile.html" class="pull-left">
										<img alt="image" class="img-circle" src="img/a7.jpg" />
									</a>
									<div class="media-body">
										<small class="pull-right">46小时前</small>
										<strong>小四</strong> XXXX
										<br />
										<small class="text-muted">3天前 2014.11.8</small>
									</div>
								</div>
							</li>
							<li class="divider"></li>
							<li>
								<div class="dropdown-messages-box">
									<a href="profile.html" class="pull-left">
										<img alt="image" class="img-circle" src="img/a4.jpg" />
									</a>
									<div class="media-body">
										<small class="pull-right text-navy">25小时前</small>
										<strong>国民岳父</strong> 如何看待“男子不满自己爱犬被称为狗，刺伤路人”？——这人比犬还凶
										<br />
										<small class="text-muted">昨天</small>
									</div>
								</div>
							</li>
							<li class="divider"></li>
							<li>
								<div class="text-center link-block">
									<a class="J_menuItem" href="mailbox.html"> <i class="fa fa-envelope"></i> <strong> 查看所有消息</strong> </a>
								</div>
							</li>
						</ul>
					</li>
					<li class="dropdown">
						<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#"> <i class="fa fa-bell"></i> <span class="label label-primary">8</span> </a>
						<ul class="dropdown-menu dropdown-alerts">
							<li>
								<a href="mailbox.html">
									<div>
										<i class="fa fa-envelope fa-fw"></i> 您有16条未读消息
										<span class="pull-right text-muted small">4分钟前</span>
									</div>
								</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="profile.html">
									<div>
										<i class="fa fa-qq fa-fw"></i> 3条新回复
										<span class="pull-right text-muted small">12分钟钱</span>
									</div>
								</a>
							</li>
							<li class="divider"></li>
							<li>
								<div class="text-center link-block">
									<a class="J_menuItem" href="notifications.html">
										<strong>查看所有 </strong>
										<i class="fa fa-angle-right"></i>
									</a>
								</div>
							</li>
						</ul>
					</li>
					<li class="dropdown hidden-xs">
						<a class="right-sidebar-toggle" aria-expanded="false"> <i class="fa fa-tasks"></i> 主题 </a>
					</li>
				</ul>
			</nav>
		</div>
		<div class="row content-tabs">
			<button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i></button>
			<nav class="page-tabs J_menuTabs">
				<div class="page-tabs-content">
					<a href="javascript:;" class="active J_menuTab" data-id="index_v3">首页</a>
				</div>
			</nav>
			<button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i></button>
			<div class="btn-group roll-nav roll-right">
				<button class="dropdown" data-toggle="dropdown">页签操作<span class="caret"></span></button>
				<ul role="menu" class="dropdown-menu dropdown-menu-right">
					<li class="tabCloseCurrent"><a>关闭当前</a></li>
					<li class="J_tabCloseOther"><a>关闭其他</a></li>
					<li class="J_tabCloseAll"><a>全部关闭</a></li>
				</ul>
			</div>
			<a href="#" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>
		</div>
		<div class="row J_mainContent" id="content-main">
			<iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="index_v3" frameborder="0" data-id="index_v3" seamless></iframe>
		</div>
		<div class="footer">
			<div class="pull-right">&copy; 2014-2015 <a href="http://www.ruoyi.vip/" target="_blank">ruoyi</a></div>
		</div>
	</div>
	<!--右侧部分结束-->
	<!--右侧边栏开始-->
	<div id="right-sidebar">
		<div class="sidebar-container">
			<ul class="nav nav-tabs navs-3">
				<li class="active">
					<a data-toggle="tab" href="#tab-1"> <i class="fa fa-gear"></i> 主题 </a>
				</li>
				<li class="">
					<a data-toggle="tab" href="#tab-2">
						通知
					</a>
				</li>
				<li>
					<a data-toggle="tab" href="#tab-3">
						项目进度
					</a>
				</li>
			</ul>

			<div class="tab-content">
				<div id="tab-1" class="tab-pane active">
					<div class="sidebar-title">
						<h3><i class="fa fa-comments-o"></i> 主题设置</h3>
						<small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
					</div>
					<div class="skin-setttings">
						<div class="title">主题设置</div>
						<div class="setings-item">
							<span>收起左侧菜单</span>
							<div class="switch">
								<div class="onoffswitch">
									<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu" />
									<label class="onoffswitch-label" for="collapsemenu">
										<span class="onoffswitch-inner"></span>
										<span class="onoffswitch-switch"></span>
									</label>
								</div>
							</div>
						</div>
						<div class="setings-item">
							<span>固定顶部</span>

							<div class="switch">
								<div class="onoffswitch">
									<input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar" />
									<label class="onoffswitch-label" for="fixednavbar">
										<span class="onoffswitch-inner"></span>
										<span class="onoffswitch-switch"></span>
									</label>
								</div>
							</div>
						</div>
						<div class="setings-item">
									<span>
										固定宽度
									</span>

							<div class="switch">
								<div class="onoffswitch">
									<input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout" />
									<label class="onoffswitch-label" for="boxedlayout">
										<span class="onoffswitch-inner"></span>
										<span class="onoffswitch-switch"></span>
									</label>
								</div>
							</div>
						</div>
						<div class="title">皮肤选择</div>
						<div class="setings-item default-skin nb">
									<span class="skin-name">
										<a href="#" class="s-skin-0">
											默认皮肤
										</a>
									</span>
						</div>
						<div class="setings-item blue-skin nb">
									<span class="skin-name">
										<a href="#" class="s-skin-1">
											蓝色主题
										</a>
									</span>
						</div>
						<div class="setings-item yellow-skin nb">
									<span class="skin-name">
										<a href="#" class="s-skin-3">
											黄色/紫色主题
										</a>
									</span>
						</div>
					</div>
				</div>
				<div id="tab-2" class="tab-pane">
					<div class="sidebar-title">
						<h3><i class="fa fa-comments-o"></i> 最新通知</h3>
						<small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
					</div>

					<div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a1.jpg" />

									<div class="m-t-xs">
										<i class="fa fa-star text-warning"></i>
										<i class="fa fa-star text-warning"></i>
									</div>
								</div>
								<div class="media-body">
									据天津日报报道：瑞海公司董事长于学伟，副董事长董社轩等10人在13日上午已被控制。
									<br />
									<small class="text-muted">今天 4:21</small>
								</div>
							</a>
						</div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a2.jpg" />
								</div>
								<div class="media-body">
									HCY48之音乐大魔王会员专属皮肤已上线，快来一键换装拥有他，宣告你对华晨宇的爱吧！
									<br />
									<small class="text-muted">昨天 2:45</small>
								</div>
							</a>
						</div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a3.jpg" />

									<div class="m-t-xs">
										<i class="fa fa-star text-warning"></i>
										<i class="fa fa-star text-warning"></i>
										<i class="fa fa-star text-warning"></i>
									</div>
								</div>
								<div class="media-body">
									写的好！与您分享
									<br />
									<small class="text-muted">昨天 1:10</small>
								</div>
							</a>
						</div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a4.jpg" />
								</div>

								<div class="media-body">
									国外极限小子的炼成！这还是亲生的吗！！
									<br />
									<small class="text-muted">昨天 8:37</small>
								</div>
							</a>
						</div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a8.jpg" />
								</div>
								<div class="media-body">
									一只流浪狗被收留后，为了减轻主人的负担，坚持自己觅食，甚至......有些东西，可能她比我们更懂。
									<br />
									<small class="text-muted">今天 4:21</small>
								</div>
							</a>
						</div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a7.jpg" />
								</div>
								<div class="media-body">
									这哥们的新视频又来了，创意杠杠滴，帅炸了！
									<br />
									<small class="text-muted">昨天 2:45</small>
								</div>
							</a>
						</div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a3.jpg" />

									<div class="m-t-xs">
										<i class="fa fa-star text-warning"></i>
										<i class="fa fa-star text-warning"></i>
										<i class="fa fa-star text-warning"></i>
									</div>
								</div>
								<div class="media-body">
									最近在补追此剧，特别喜欢这段表白。
									<br />
									<small class="text-muted">昨天 1:10</small>
								</div>
							</a>
						</div>
						<div class="sidebar-message">
							<a href="#">
								<div class="pull-left text-center">
									<img alt="image" class="img-circle message-avatar" src="img/a4.jpg" />
								</div>
								<div class="media-body">
									我发起了一个投票 【你认为下午大盘会翻红吗？】
									<br />
									<small class="text-muted">星期一 8:37</small>
								</div>
							</a>
						</div>
					</div>
				</div>
				<div id="tab-3" class="tab-pane">
					<div class="sidebar-title">
						<h3><i class="fa fa-cube"></i> 最新任务</h3>
						<small><i class="fa fa-tim"></i> 您当前有14个任务，10个已完成</small>
					</div>

					<ul class="sidebar-list">
						<li>
							<a href="#">
								<div class="small pull-right m-t-xs">9小时以后</div>
								<h4>市场调研</h4>
								按要求接收教材；

								<div class="small">已完成： 22%</div>
								<div class="progress progress-mini">
									<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
								</div>
								<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="small pull-right m-t-xs">9小时以后</div>
								<h4>可行性报告研究报上级批准</h4>
								编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

								<div class="small">已完成： 48%</div>
								<div class="progress progress-mini">
									<div style="width: 48%;" class="progress-bar"></div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="small pull-right m-t-xs">9小时以后</div>
								<h4>立项阶段</h4>
								东风商用车公司 采购综合综合查询分析系统项目进度阶段性报告武汉斯迪克科技有限公司

								<div class="small">已完成： 14%</div>
								<div class="progress progress-mini">
									<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="label label-primary pull-right">NEW</span>
								<h4>设计阶段</h4>
								<!--<div class="small pull-right m-t-xs">9小时以后</div>-->
								项目进度报告(Project Progress Report)
								<div class="small">已完成： 22%</div>
								<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="small pull-right m-t-xs">9小时以后</div>
								<h4>拆迁阶段</h4>
								科研项目研究进展报告 项目编号: 项目名称: 项目负责人:

								<div class="small">已完成： 22%</div>
								<div class="progress progress-mini">
									<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
								</div>
								<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="small pull-right m-t-xs">9小时以后</div>
								<h4>建设阶段</h4>
								编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

								<div class="small">已完成： 48%</div>
								<div class="progress progress-mini">
									<div style="width: 48%;" class="progress-bar"></div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="small pull-right m-t-xs">9小时以后</div>
								<h4>获证开盘</h4>
								编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

								<div class="small">已完成： 14%</div>
								<div class="progress progress-mini">
									<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--右侧边栏结束-->
	<!--mini聊天窗口开始-->
	<div class="small-chat-box fadeInRight animated">
		<div class="heading" draggable="true">
			<small class="chat-date pull-right">
				2015.9.1
			</small>
			与 ruoyi 聊天中
		</div>

		<div class="content">
			<div class="left">
				<div class="author-name">
					ruoyi
					<small class="chat-date">
						10:02
					</small>
				</div>
				<div class="chat-message active">
					你好
				</div>
			</div>
			<div class="right">
				<div class="author-name">
					游客
					<small class="chat-date">
						11:24
					</small>
				</div>
				<div class="chat-message">
					你好，请问H+有帮助文档吗？
				</div>
			</div>
			<div class="left">
				<div class="author-name">
					ruoyi
					<small class="chat-date">
						08:45
					</small>
				</div>
				<div class="chat-message active">
					帮助文档在docs文件夹下
				</div>
			</div>
		</div>
		<div class="form-chat">
			<div class="input-group input-group-sm">
				<input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-primary" type="button">发送</button> </span>
			</div>
		</div>
	</div>
	<div id="small-chat">
		<span class="badge badge-warning pull-right">5</span>
		<a class="open-small-chat">
			<i class="fa fa-comments"></i>
		</a>
	</div>
	<!--mini聊天窗口结束-->
</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/plugins/contextMenu/jquery.contextMenu.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/hplus.js}"></script>
<script th:src="@{/js/contabs.js}" type="text/javascript" ></script>

<!-- 第三方插件 -->
<script th:src="@{/js/plugins/pace/pace.min.js}"></script>
</body>
</html>
